<template>
  <div class="subPage" >
    <div class="topBox">
      <div class="doctorImg" >
        <img :src="doctorInfo.doctor_image_key">
      </div>
      <div class="doctorName">
        <div class="nameClass">{{doctorInfo.doctor_name}}</div>
        <div class="deptCaass">{{doctorInfo.dept_name}} / {{doctorInfo.positional_title}}</div>
      </div>
    </div>

    <div class="centerBoxShow prey" >
      <div class="skilledInClass clearfix" style="margin-bottom:30rpx">
        <span class="skilledInTit">专长</span>
        {{doctorInfo.skilled_in}}
      </div>
      <div class="skilledInClass clearfix">
        <span class="skilledInTit">简介</span>
        {{doctorInfo.doctor_info}}
      </div>
    </div>

    <div :class="{'centerBoxHide': !showMore, 'centerBoxShow': showMore,'flexibleBox':true}"
         :style="{'height':centerBox === 'centerBoxShow'?preyHeight+'px':'270rpx'}">
      <div class="skilledInClass clearfix" style="margin-bottom:30rpx">
        <span class="skilledInTit">专长</span>
        {{doctorInfo.skilled_in}}
      </div>
      <div class="skilledInClass clearfix">
        <span class="skilledInTit">简介</span>
        {{doctorInfo.doctor_info}}
      </div>
    </div>
    <div class="showHide" >
      <img :src="openUrl" @click="showHide">
    </div>
    <div>

    </div>
    <div class="centBox">
      <div :class="['bomBox', {'ipxHeight':ifIphonex}]"  v-if="doctorList.length != 0">
        <div class="bomItem" v-for="(item, index) in doctorList" :key="index">
          <div class="leftLine" ></div>
          <div class="itemTop">
            <span class="titItem"><span class="leftTit"></span> {{item.arrange_day_timestamp}}&nbsp;/&nbsp;{{item.period_id == 1 ? '上午' :item.period_id == 2 ?'下午':item.period_id == 3?'夜间':'上午'}}</span>
            <span class="ridItem">¥&nbsp;{{item.registration_fee}}</span>
          </div>
          <div class="itemBom">
            <span class="leftBom">{{item.used_tick+'人预约'}}&nbsp;/&nbsp;剩余{{item.max_tick*1 - item.used_tick*1}}个号</span>
            <span class="rightBom" v-if="isChange" @click="changeBooking(item)">更换预约</span>
            <button class="rightBom" v-else open-type="getUserInfo" plain="true" @click.stop @getuserinfo="toDetails($event,item,4)">
              <span>立即预约</span>
            </button>
          </div>
          <!-- <div class="dateItem">{{item.arrange_day_timestamp}}</div>
          <div class="numItem">¥&nbsp;{{item.used_tick+'.00'}}</div>
          <div class="btnItem" @click="about(item)">预约</div>
          <div class="txtTiem">剩余{{item.useful_tick}}</div> -->
          <div></div>
        </div>
        <!-- 底部样式填充 -->
        <div  class="fixBom">
          <div class="leftLine" ></div>
        </div>
      </div>
      <div class="nullBox" v-if="doctorList.length == 0">
          <div class="searchDefault" >
            <img :src="nullUrl" >
          </div>
        </div>
    </div>
      <i-toast id="toast" />
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
  import api from '@/api/api'
  import storage from '@/utils/storage'
  import nim from '@/utils/nim'
  import { mapState } from "vuex";
  import { $Toast } from '../../../../../static/iview/base'
  export default {
    components: {
    //   visitingTips
    },
    data () {
      return {
        doctorList: [],
        doctorInfo: {},
        interrogationKey: '',
        nullUrl: '',
        dept_list:[],
        centerBox: 'centerBoxHide',
        dept_info: '',
        dept_name: '',
        today: '',
        tomorrow: '',
        dateTime: [],
        openUrl: '',
        arrange_day: '',
        showMore: false,
        isChange: false,
        apt_id: '',
        preyHeight: 135
      }
    },
    computed: {
      ...mapState(["ifIphonex"])
    },
    mounted () {
      console.log(this.ifIphonex, 'ifIphonex')
    },
    onLoad (options) {
      if (options.isChange) {
        this.isChange = options.isChange
        this.apt_id = options.apt_id
      } else {
        this.isChange = false
      }
      let that = this
    },
    onUnload() {
      this.openUrl = ''
      this.showMore = false
      this.isChange = false
      this.apt_id = ''
      this.doctorList = []
    },
    methods: {
      showHide () {
        this.showMore = !this.showMore
        this.openUrl = this.openUrl == this.imgUrl+'arrow_open.png' ? this.imgUrl+'arrow_close.png' : this.imgUrl+'arrow_open.png'
        this.$nextTick(() => {
          this.centerBox = this.centerBox == 'centerBoxShow' ? 'centerBoxHide' : 'centerBoxShow'
          console.log(this.showMore)
        })
      },
      getDateTime (time) {
        let y1
        let m1
        let d1
        let n
        let s
        var day1 = new Date(time*1000);
        // day1.setTime(day1.getTime());
        y1 =  day1.getFullYear()
        m1 = day1.getMonth()+1
        d1 = day1.getDate()
        m1 = m1*1 < 10 ? '0' + m1 : m1
        d1 = d1*1 < 10 ? '0' + d1 : d1
        n = day1.getHours()
        if (n<=12) {
          n = '上午'
        } else {
          n = '下午'
        }
        s = y1 + '年' + m1 + '月' + d1 + '日'
        return s
      },
      getDeptList (e, j) {
        this.$api.getDeptList({dept_id: e, arrange_day: j}, ({'showLoading': true})).then(res => {
          this.dept_info = res.data.dept_info
          this.dept_name = res.data.dept_name
          this.dept_list = res.data.diagnose_times
        })
      },
      getDoctor (e,doctor_id) {
        let list = []
        let params = {
          doctor_id: this.doctorInfo.doctor_id,
          arrange_day: this.arrange_day,
          category: '0'
        }
        // this.$api.getDoctorLater(params, ({'showLoading': true})).then(res => {
        this.$api.getDoctorInfo(params, ({'showLoading': true})).then(res => {
          console.log(res)
          this.doctorList = res.data.arrange_list
          this.doctorInfo.dept_limit = res.data.dept_limit
          // let that = this
          this.doctorList.forEach((item, index) => {
            item.arrange_day_timestamp = this.getDateTime(item.arrange_day_timestamp)
            if (!item.registration_fee  || item.registration_fee == 0) {
              item.registration_fee = '0.0'
            } else {
               item.registration_fee = parseFloat(item.registration_fee*0.01).toFixed(1)
            }
          })
          // console.log(this.getDateTime(this.doctorList[0].arrange_day_timestamp))
        })
      },
      toDetails(e,item, j) {
        Object.assign(this.doctorInfo, item)
        console.log(this.doctorInfo)
        this.judgeUserInfo(e,item,j)
      },
      // 用户是否登入判断
      judgeUserInfo(e,item,j) {
        if (e.mp.detail.rawData) {
        //用户按了允许授权按钮
        console.log("用户按了允许授权按钮");
        //判断是否登陆(是否有患者token)
        var token = this.$storage.getToken();
        if (token) {
          //判断是否认证
          var that = this;
          that.$api
            .get_user_info("", { showLoading: true })
            .then(function (data) {
              let accountInfo = data.data[0];
              accountInfo.headImg = data.data[0].head_portrait
                ? data.data[0].head_portrait
                : "";
              that.$storage.setAccountInfo(accountInfo);
              if (accountInfo.netease_token) {
                nim.login(accountInfo);
              }
              if (data.data[0].isreal == 0) {
                // '未认证' 去认证
                that.$router.push("/pages/qualification/main");
              } else if (data.data[0].isreal == 1) {
                // '已认证' 去挂号
                that.$router.push(`/pages/subPage/register/fillInMsg/main?doctorInfo=${JSON.stringify(that.doctorInfo)}&key=${j}`)
              }
            });
          } else {
            //跳转登录页
            // console.log('用户未登录')
            let that = this;
            mpvue.login({
              success(res) {
                if (res.code) {
                  that.$api.wechatLogin({ code: res.code }).then((data) => {
                    that.openid = data.data.openid;
                    that.key = data.data.session_key;
                    if (data.data.token) {
                      that.$storage.setToken(data.data.token);
                    } else {
                      that.$router.push("/pages/center/child/login/main");
                    }
                  });
                } else {
                  this.$router.push("/pages/center/child/login/main");
                }
              },
            });
          }
        } else {
          //用户按了拒绝按钮
          console.log("用户按了拒绝按钮");
        }
      },
      // 更改预约
      changeBooking (item) {
        let param = {
          apt_id: this.apt_id,
          arrange_info_id: item.arrange_info_id,
          doctor_id: this.doctorInfo.doctor_id
        }
        // this.$router.replace(`/pages/center/child/appointmentDetails/main?aptId=${this.apt_id}`)
        this.$api.changeSpecialDiagnosis(param, { showLoading: true }).then(res=>{
          if (res.code === 0) {
            $Toast({
              content: '更换成功',
              type: 'success'
            })
          }
          // this.$router.replace(`/pages/center/child/appointmentDetails/main?aptId=${this.apt_id}`)
          this.$router.go(-2)
        })
      },
      initBoxHeight() {
        var query = wx.createSelectorQuery()
        query.select( '.prey' ).boundingClientRect((res)=>{
            console.log(res)
            this.preyHeight = res.height
        }).exec()

      },
    },
    onShow () {
      this.imgUrl = api.imgUrl
      this.nullUrl = this.imgUrl+'empty_view_no_arrange.png'
      this.doctorInfo = JSON.parse(this.$route.query.doctorInfo)
      this.openUrl = this.imgUrl+'arrow_open.png'
      this.arrange_day = this.$route.query.key
      this.centerBox = 'centerBoxHide'
      this.getDoctor()
      setTimeout(() => {
       this.initBoxHeight()
      }, 300);
    },
    watch: {
      sessionsList: function(oldValue, newValue) {
        // this.dealData()
      }
    }
  }
</script>

<style scoped lang='less'>
  .subPage {
    // display: flex;
    // flex-direction: column;
    background: #F9F9F9;
    overflow: hidden;
    overflow-y: scroll;
  }
  .subPage::-webkit-scrollbar {display:none}
  .topBox{
    width:710rpx;
    height:120rpx;
    background:rgba(74,100,234,1);
    padding:20rpx 40rpx;
    font-size:36rpx;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    display: flex;
    // justify-content:
    .doctorImg{
      height: 120rpx;
      width: 120rpx;
      img{
        width: 100%;
        height: 100%;
        border-radius:70rpx;
      }
    }
    .doctorName{
      margin-left:20rpx;
       line-height: 65rpx;
       .nameClass{
         font-size:50rpx;
        // font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
       }
       .deptCaass{
         font-size:30rpx;
          // font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,255,255,1);
       }
    }
    // line-height: 90rpx;
  }
  .showHide{
    width: 100%;
    height: 30rpx;
    // border: 1rpx solid red;
    background: #FFFFFF;
    padding-bottom: 20rpx;
    text-align: center;
    display: flex;
    justify-content: center;
    z-index: 999;
    img {
      width: 60rpx;
      height: 40rpx;
    }

  }
  .centBox{
    margin-top: 16rpx;
    background: #FFFFFF;
    overflow: hidden;
    // height: 100%;
    .titBox{
      height: 96rpx;
      font-size:36rpx;
      // font-family:PingFangSC-Medium,PingFang SC;
      font-weight:600;
      color:rgba(51,51,51,1);
      text-align: center;
      line-height: 96rpx;
    }
    .tabsClass{
      height:90rpx;
      padding: 18rpx 95rpx;
      display: flex;
      justify-content:space-between;
      .itemTabs{
        width: 196rpx;
        height: 90rpx;
        line-height: 90rpx;
        font-size:36rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
      }
      .itemTabs2{
        width: 196rpx;
        height: 90rpx;
        line-height: 90rpx;
        font-size:36rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(75,122,234,1);
        border-bottom: 4rpx solid rgba(75,122,234,1);
      }
    }

  }
  .centerBox{
    // width: 670rpx;
    // height: 429rpx;
    // display: flex;
    padding: 30rpx 40rpx;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 4;
    // overflow: hidden;
    // font-size:30rpx;
    // // font-family:PingFangSC-Regular,PingFang SC;
    // font-weight:400;
    // color:rgba(102,102,102,1);
    // line-height:55rpx;
    // background: #FFFFFF;
    .skilledInClass{
      font-size:30rpx;
      // font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height: 46rpx;
    }

  }
  .centerBoxShow{
    width: 650rpx;
    padding: 30rpx 40rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size:36rpx;
    // font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:60rpx;
    background: #FFFFFF;
  }
  .nullBox{
    // height: 800rpx;
    background: #FFFFFF;
    position: relative;
    //  height:600px;/去掉高度，只能垂直居中。
    display:flex;
    justify-content:center;
    align-items:center;
    // overflow-y: auto;
    // overflow-x: hidden;
    // overflow: hidden;
    .searchDefault{
      width:720rpx;
      height: 100%;
      position: relative;
      // line-height: 493rpx;
      margin: 0 auto;
      img{
        width: 100%;
        height: 493rpx;
      }
    }
  }
  .bomBox{
    background: #FFFFFF;
    position: relative;
    //  height:600px;/去掉高度，只能垂直居中。
    display:flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: 683rpx;
    // overflow: hidden;
    .fixBom {
      flex: 1;
      position: relative;
      margin: 0 0 0 40rpx;
      padding: 30rpx 0;
      // height:100%;
      margin-bottom: 8rpx;
      border-bottom:0;
      .leftLine {
        position: absolute;
        height: 100%;
        width: 1rpx;
        background-color: #E9E9E9;
        left: 0rpx;
        top: 0rpx;
      }
    }
    .bomItem{
      position: relative;
      margin: 0 0 0 40rpx;
      // margin-bottom: 0rpx;
      padding: 30rpx 0;
      height: 112rpx!important;
      background: #FFFFFF;
      // box-shadow:0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.13);
      // border-radius:10rpx 0 0 0;
      // margin-bottom: 20rpx;
      // border-left: 1rpx solid #e9e9e9;
      border-bottom: 20rpx solid #F9F9F9;
      // padding: 30rpx 34rpx;
      // padding-right: 0;
      // display:flex;
      // justify-content:space-between;
      // flex-direction: column;
      .leftLine {
        position: absolute;
        height: 100%;
        width: 1rpx;
        background-color: #E9E9E9;
        left: 0rpx;
        top: 0rpx;
      }
      .itemTop{
        height: 42rpx;
        width: 100%;
        display:flex;
        justify-content:space-between;
        margin-bottom:19rpx;
        .titItem{
          margin-left: 39rpx;
          font-size:30rpx;
          // font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(51,51,51,1);
          .leftTit{
            display: inline-block;
            width:20rpx;
            height:20rpx;
            background:rgba(255,255,255,1);
            border:5rpx solid rgba(233,233,233,1);
            border-radius: 50%;
            position: absolute;
            left: -13rpx;
            margin-top: 7rpx;
          }
        }
        .ridItem{
          margin-right:20rpx;
          font-size:30rpx;
          // font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,84,83,1);
        }
      }
      .itemBom{
        height: 60rpx;
        width: 100%;
        display:flex;
        justify-content:space-between;
        .leftBom{
           margin-left:20rpx;
          font-size:30rpx;
          // font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height: 60rpx;
        }
        .rightBom{
          display: inline-block;
          margin-right:20rpx;
          width:180rpx;
          height:60rpx;
          background:rgba(255,255,255,1);
          border-radius:2rpx;
          border:1rpx solid rgba(160,183,237,1);
          font-size:36rpx;
          // font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          line-height: 60rpx;
          text-align: center;
          color:rgba(75,122,234,1);
          span {
            font-size: 36rpx;
          }
        }
      }
      .dateItem{
        font-size:34pxr;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        margin-right: 25rpx;
        line-height: 50rpx;
        height: 50rpx;
        // display: inline-block;
      }
      .numItem{
        font-size:34rpx;
        width: 120rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,84,83,1);
        margin-right: 13rpx;
        line-height: 50rpx;
        height: 50rpx;
        // display: inline-block;
      }
      .btnItem{
        width:125rpx;
        height:52rpx;
        background:rgba(81,114,240,0.1);
        border-radius:29rpx;
        border:1rpx solid rgba(81,114,240,1);
        margin-right: 15rpx;
        text-align: center;
        line-height: 44rpx;
        font-size:32prx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(81,114,240,1);
        span {
          font-size: 32rpx;
        }
      }
      .txtTiem{
        font-size:22rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(81,114,240,1);
        line-height: 50rpx;
        height: 50rpx;
      }
    }
  }
  .ipxHeight {
    height: 925rpx;
  }
  .flexibleBox {
    transition: height .3s ease 0s;
  }
  .prey {
    position: absolute;
    z-index: -9999;
    visibility: hidden;
  }
  .centerBoxHide{
    width: 650rpx;
    height: 270rpx;
    padding: 14rpx 40rpx;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 4;
    overflow: hidden;
    font-size:28rpx;
    // font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:60rpx;
    background: #FFFFFF;
  }
  .centerBoxShow{
    width: 650rpx;
    height: auto;
    padding: 14rpx 40rpx 0 40rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size:28rpx;
    // font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:60rpx;
    background: #FFFFFF;
  }
  .skilledInTit{
      display: inline-block;
      width:103rpx;
      height:46rpx;
      background:rgba(74,100,234,0.1);
      border-radius:23rpx;
      border:1rpx solid rgba(74,100,234,1);
      font-size:28rpx;
    //   display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 4;
    // overflow: hidden;
      // font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(74,100,234,1);
      line-height: 46rpx;
      text-align: center;
    }
</style>
